<template>
    <div id="home">
        <nav-bar>
            <template v-slot:default>图书兄弟</template>
        </nav-bar>
        <tab-control
                :titles="titles"
                @tabClick="tabClick"
                v-show="isTabFixed"
        >
        </tab-control>

        <div class="wrapper">
            <div class="content">
                <div ref="bannerRef">
                    <home-swiper :banners="banners"></home-swiper>
                    <recommend :recommends="recommends"></recommend>
                </div>
                <tab-control
                        :titles="titles"
                        @tabClick="tabClick">
                </tab-control>
                <goods-list :goods="showGoods"></goods-list>
            </div>
        </div>
        <back-top @goTop="goTop" v-show="isShowBackTop"></back-top>
    </div>
</template>

<script>
    import {defineComponent, onMounted, ref, reactive, computed, watchEffect, nextTick} from 'vue'
    import NavBar from 'components/common/navbar/NavBar'
    import Recommend from './ChildComps/Recommend'
    import TabControl from "components/content/tabControl/TabControl";
    import {getHomeAllData, getHomeGoods} from 'network/home'
    import GoodsList from "@/components/content/goods/GoodsList";
    import BScroll from 'better-scroll'
    import BackTop from "@/components/common/backtop/BackTop";
    import HomeSwiper from "@/views/home/ChildComps/HomeSwiper";

    export default defineComponent({
        components: {
            NavBar,
            Recommend,
            TabControl,
            GoodsList,
            BackTop,
            HomeSwiper
        },
        setup() {

            // 显示Tab标题
            let isTabFixed = ref(false)
            // 显示BackTop
            let isShowBackTop = ref(false)
            // banners数据
            let banners = ref([])

            let bannerRef = ref(null)
            // 推荐商品
            const recommends = ref([])
            // tab标题
            const titles = ref(['热销', '推荐', '上新'])

            // 商品列表数据类型模型
            const goods = reactive({
                sales: {page: 1, list: []},
                recommend: {page: 1, list: []},
                new: {page: 1, list: []}
            })

            // 当前商品分类
            let currentType = ref('sales')

            // 显示分类商品
            const showGoods = computed(() => {
                return goods[currentType.value].list
            })

            // 滚动刷新
            let bscroll = reactive({})

            onMounted(() => {
                getHomeAllData().then(res => {
                    // console.log(res.slides)
                    recommends.value = res.goods.data
                    banners.value = res.slides
                }, err => {
                    console.log(err);
                })

                // 获取热销商品
                getHomeGoods('sales').then(res => {
                    goods.sales.list = res.goods.data
                }, err => {
                    console.log(err);
                })

                // 获取推荐商品
                getHomeGoods('recommend').then(res => {
                    goods.recommend.list = res.goods.data
                }, err => {
                    console.log(err);
                })
                // 获取最新商品
                getHomeGoods('new').then(res => {
                    goods.new.list = res.goods.data
                }, err => {
                    console.log(err);
                })

                // 创建BetterScroll对象
                bscroll = new BScroll(document.querySelector('.wrapper'), {
                    probeType: 3,// 0,1,2,3(只要在滑动就处罚scroll)
                    click: true,// 滚动区域是否运行点击
                    pullUpLoad: true,// 上拉加载更多，默认false
                });


                // console.log(bannerRef.value)// 能够获取到dom元素

                // 触发滚动事件
                bscroll.on('scroll', (position) => {
                    // console.log(-position.y)
                    // console.log(bannerRef.value.offsetHeight)
                    isShowBackTop.value = isTabFixed.value = -position.y > bannerRef.value.offsetHeight

                })
                // 上拉加载数据，触发pullingUp
                bscroll.on('pullingUp', () => {
                    // console.log('上拉加载更多...')
                    // console.log(`内容高度：${document.querySelector('.content').clientHeight}`);
                    const page = goods[currentType.value].page + 1
                    // console.log(`当前类型：${currentType.value},当前page:${page}`);

                    getHomeGoods(currentType.value, page).then(res => {
                        goods[currentType.value].list.push(...res.goods.data)
                        goods[currentType.value].page += 1
                    })

                    // 完成上拉，等数据请求完成，要将新数据展示出来
                    bscroll.finishPullUp()
                    // 重新计算高度
                    bscroll.refresh()
                    // console.log(`内容高度：${document.querySelector('.content').clientHeight}`);
                })
            })
            const tabClick = (index) => {
                let types = ['sales', 'recommend', 'new']
                currentType.value = types[index]
                nextTick(() => {
                    // 重新计算高度
                    bscroll && bscroll.refresh()
                })
            }

            // 监听任何一个变量有变化
            watchEffect(() => {
                nextTick(() => {
                    // 重新计算高度
                    bscroll && bscroll.refresh()
                })
            })

            const goTop = () => {
                // console.log("返回顶部")
                bscroll.scrollTo(0, 0, 500)
            }

            return {
                recommends,
                tabClick,
                titles,
                goods,
                showGoods,
                bannerRef,
                isTabFixed,
                isShowBackTop,
                goTop,
                banners
            }
        }

    })
</script>

<style scoped>
    #home {
        height: 100vh;
        position: relative;
    }

    .wrapper {
        position: absolute;
        top: 45px;
        bottom: 50px;
        left: 0;
        right: 0;
        overflow: hidden;
    }

    .content {

    }
</style>
